<template>
    <div id="app">
        <div id="nav">
            <router-link
                    v-for="(item,index) in menuList"
                    :to="item.path"
                    :key="index"
                    style="margin: 0 20px;"
            >
                <a-tooltip>
                    <template slot="title">
                        {{item.dec}}
                    </template>
                    {{item.name}}
                </a-tooltip>
            </router-link>
        </div>
        <router-view/>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                menuList: [
                    {
                        path: "/",
                        name: "API",
                        dec:"基于Promise封装axios，方便维护"
                    },
                    {
                        path: "/echarts",
                        name: "Echarts",
                        dec:"ECharts 教程 ECharts 是一个使用 JavaScript 实现的开源可视化库,涵盖各行业图表,满足各种需求。"
                    },
                    {
                        path: "/jsplumb",
                        name: "JsPlumb",
                        dec:"jsPlumb是一个比较强大的绘图组件，它提供了一种方法，主要用于连接网页上的元素。"
                    },
                    {
                        path: "/k-form-design",
                        name: "K-Form-Design",
                        dec:"基于vue和ant-design-vue实现的表单设计器，样式使用less作为开发语言，主要功能是能通过简单操作来生成配置表单，生成可保存的JSON数据，并能将JSON还原成表单，使表单开发更简单更快速"
                    },
                    {
                        path: "/yesapiss",
                        name: "Yesapi",
                        dec:"果创云 为项目开发提供优质云服务，做项目，更轻松！ "
                    },
                    {
                        path: "/vueFullcalendar",
                        name: "vueFullcalendar",
                        dec:"FullCalendar与Vue JavaScript框架无缝集成。它提供了一个与FullCalendar s标准API功能完全匹配的组件。"
                    }
                ]
            }
        }
    }
</script>
<style lang="less">
    * {
        margin: 0;
        padding: 0;
    }

    #app {
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
    }

    #nav {
        padding: 30px;
        box-sizing: border-box;
        border-bottom: 2px solid #eee;

        a {
            font-weight: bold;
            color: #2c3e50;

            &.router-link-exact-active {
                color: #42b983;
            }
        }
    }
</style>
